var galleries = {};

var SPEED  = 300;
var WIDTH  = 600;
var HEIGHT = 400;

$(function(){
    $('ul.photo-gallery').each(function(){
        if (! galleries[this.id]) {
            galleries[this.id] = new PhotoGallery($(this));
        }
    });
});

function PhotoGallery(ul) {
    // set ul
    this.ul = ul;

    this.id = this.ul.attr('id');

    var util = ul.children('li.data');
    // extract scripts,styles
    util.children('script,link').each(function(){
        $(this).insertBefore($(this).parent().parent());
    });
    // extract data
    this.json = util.text();
    this.data = JSON.parse(this.json);
    util.remove();

    // set lis
    this.li = this.ul.children('li');
    
    // container
    this.container = $('<div class="photo-gallery-container">').insertBefore(this.ul);
    this.container
        .css({
            position:'relative',
            width:  this.data.width,
            height: this.data.height,
            float:  this.data.align
        })
        .html(this.ul);

    // ul
    this.ul.css({
        listStyle: 'none',
        display:'block'
    });

    // li
    this.li
        .css({
            width: this.data.width,
            height: this.data.height
        })
        .data('gallery', this)
        .each(function(index){
            $(this).css('z-index', $(this).data('gallery').data.images.length - index);
        })
        .click(function(){
            $(this).data('gallery').show(SPEED);
        });
    //image sizes
    this.ul.find('img').css({
        width: this.data.width,
        height: this.data.height
    })

    this.li.first().mouseenter(function(){$(this).parent().addClass('hover')});
    this.li.first().mouseleave(function(){$(this).parent().removeClass('hover')});

    // lightbox overlay
    this.overlay = $('<div class="photo-gallery-overlay">')
        .html(
            $('<a href="javascript:;" class="close">')
                .html('x')
                .data('gallery', this)
                .click(function(){
                    $(this).data('gallery').hide(SPEED);
                })
        )
        .data('gallery', this)
        .appendTo(document.body);

    // lightbox window
    this.window = $('<div class="photo-gallery-window">')
        .css({
            width: WIDTH,
            height: HEIGHT,
            margin: (-1*HEIGHT/2) + 'px 0 0 ' + (-1*WIDTH/2) + 'px'
        })
        .append( // UL
            $('<ul>')
                .css({
                    width: WIDTH * this.data.images.length,
                    height: HEIGHT
                })
        )
        .data('gallery', this)
        .appendTo(document.body);

    // lightbox controls
    this.controlPrev = $('<span class="photo-gallery-control prev">')
        .html('&laquo;')
        .css({
            height:HEIGHT,
            lineHeight: HEIGHT + 'px',
            margin: (-1*HEIGHT/2) + 'px 0 0 ' + ((-1*WIDTH/2)-100) + 'px'
        })
        .data('gallery', this)
        .click(function(){
            $(this).data('gallery').left();
        })
        .appendTo(document.body)
    this.controlNext = $('<span class="photo-gallery-control next">')
        .html('&raquo;')
        .css({
            height:HEIGHT,
            lineHeight: HEIGHT + 'px',
            margin: (-1*HEIGHT/2) + 'px 0 0 ' + (WIDTH/2) + 'px'
        })
        .data('gallery', this)
        .click(function(){
            $(this).data('gallery').right();
        })
        .appendTo(document.body);
}
PhotoGallery.prototype.show = function() {
    var ul = this.ul;
    var id = this.ul.attr('id');

    this.window.addClass('start').removeClass('end');
    this.controlPrev.hide();

    // load images
    var li, ul = this.window.children('ul');
    ul.empty().css('margin-left', 0);
    for(var i=0; i<this.data.images.length; i++) {
        li = $('<li>')
            .html('<img src="'+this.data.images[i]+'" height="'+HEIGHT+'">')
            .css({
                width: WIDTH,
                height: HEIGHT
            })
        ul.append(li);
    }

    // show gallery
    this.overlay.fadeIn(SPEED);
    this.window.fadeIn(SPEED);
    this.controlNext.fadeIn(SPEED);
}
PhotoGallery.prototype.hide = function() {
    this.overlay.fadeOut(SPEED);
    this.window.fadeOut(SPEED);
    this.controlNext.fadeOut(SPEED);
    this.controlPrev.fadeOut(SPEED);
};

PhotoGallery.prototype.left = function() {
    this.scroll(WIDTH);
}
PhotoGallery.prototype.right = function() {
    this.scroll(-1*WIDTH);
}
PhotoGallery.prototype.scroll = function(amount) {
    var ul      = this.window.children('ul').first();
    if (ul.data('animate')) {
        return;
    }

    var min     = -1 * WIDTH * (this.data.images.length-1);
    var current = parseInt(ul.css('margin-left'));
    var pos     = current + amount;

    // test start position
    if (pos == 0) {
        this.controlPrev.hide();
    } else {
        this.controlPrev.show();
    }

    // test end position
    if (pos == min) {
        this.controlNext.hide();
    } else {
        this.controlNext.show();
    }

    if (pos <= 0 && pos >= min) {
        ul
            .data('animate', true)
            .animate({
                marginLeft: pos
            }, {
                complete: function(){
                    $(this).data('animate', false)
                }
            })
    }
}